<template>
  <div id="proxy-index">
    <div class="content-proxy" v-loading="loading">
      <img src="@/assets/images/icon/proxy_font.png" class="top-img" alt="">
      <div class="h3"> {{ $t('member.proxy.index.title') }}</div>
      <div class="proxy-row">
        <div class="row-wrap">
          <img src="@/assets/images/icon/icon_proxy_01.png" alt="">
          <div class="wrap-h4"> {{ $t('member.proxy.index.title1') }}</div>
          <div class="wrap-h5"> {{ $t('member.proxy.index.desc1') }}</div>
        </div>
        <div class="row-wrap">
          <img src="@/assets/images/icon/icon_proxy_02.png" alt="">
          <div class="wrap-h4"> {{ $t('member.proxy.index.title2') }}</div>
          <div class="wrap-h5"> {{ $t('member.proxy.index.desc2') }}</div>
        </div>
        <div class="row-wrap">
          <img src="@/assets/images/icon/icon_proxy_03.png" alt="">
          <div class="wrap-h4"> {{ $t('member.proxy.index.title3') }}</div>
          <div class="wrap-h5"> {{ $t('member.proxy.index.desc3') }}</div>
        </div>
      </div>
      <div class="proxy-wrap">
        <div class="wrap-box">
          <div class="wrap-title"> {{ $t('member.proxy.index.title4') }}</div>
          <div class="wrap-con"> {{ $t('member.proxy.index.desc4') }}</div>
        </div>
        <div class="wrap-box">
          <div class="wrap-title"> {{ $t('member.proxy.index.title5') }}</div>
          <div class="wrap-con"> {{ $t('member.proxy.index.desc5') }}</div>
        </div>
        <div class="wrap-box">
          <div class="wrap-title"> {{ $t('member.proxy.index.title6') }}</div>
          <div class="wrap-con"> {{ $t('member.proxy.index.desc6') }}</div>
        </div>
      </div>
      <div class="proxy-footer">
        <el-button :disabled="disabled" style="width: 460px;" type="primary" @click="$router.push({path: 'proxy_apply'})"> {{ $t('member.proxy.index.becomeAnAgent') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { info } from "@/api/member/info"
export default {
  data() {
    return {
      loading: true,
      memberInfo: {},
      disabled: false,
    };  
  },
  created() {
    this.getInfo();
  },
  mounted() {

  },
  methods: {
    async getInfo() {
			await info()
      .then(res => {
        if (res.code == 0) {
          this.memberInfo = res.data
          if(this.memberInfo.aagent_status == 0 && this.memberInfo.is_aagent == 1){
            this.disabled = true;
          }
          if(this.memberInfo.aagent_status == 1){
            this.$router.replace({path: 'proxy_data'})
          }
        }
        this.loading = false
      })
      .catch(err => {
        this.loading = false
        this.$message.error(err.message)
      })
		},
  }
};
</script>

<style scoped lang="scss">
  .content-proxy {
    width: 100%;
    padding: 40px 42px;
    box-sizing: border-box;
    background: #fff;
    .top-img {
      width: 316px;
      height: 24px;
      margin-bottom: 19px;
    }
    .h3 {
      font-size: 14px;
      color: #303133;
      line-height: 22px;
      margin-bottom: 20px;
    }
    .proxy-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 34px;
      .row-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        max-width: 246px;
        img {
          width: 38px;
          height: 38px;
        }
        .wrap-h4 {
          color: #282828;
          line-height: 17px;
          padding: 8px 0px;
        }
        .wrap-h5 {
          line-height: 17px;
          color: #92969E;
          text-align: center;
        }
      }
    }
    .proxy-wrap {
      .wrap-box {
        margin-bottom: 20px;
        .wrap-title {
          font-size: 13px;
          font-weight: 600;
          color: #282828;
          line-height: 18px;
          margin-bottom: 4px;
        }
        .wrap-con {
          font-size: 12px;
          color: #92969E;
          line-height: 17px;
        } 
      }
    }
    .proxy-footer {
      padding-top: 20px;
      width: 100%;
      text-align: center;
    }
  }
</style>
